<!-- HomeworkStats.vue -->
<template>
  <el-card class="stats-card">
    <template #header>
      <div class="card-header">
        <span>作业监控统计</span>
      </div>
    </template>
    
    <div class="stats-overview">
      <el-statistic title="总作业数" :value="stats.total" />
      <el-statistic title="已提交" :value="stats.submitted" />
      <el-statistic title="已批改" :value="stats.passed" />
      <el-statistic title="平均分" :value="stats.averageScore" :precision="1" />
    </div>
    
    <el-divider />
    
    <div class="subject-stats">
      <h4>学科作业统计</h4>
      <el-table :data="stats.subjectStats" style="width: 100%">
        <el-table-column prop="subject" label="学科" />
        <el-table-column prop="submittedRate" label="提交率" />
        <el-table-column prop="averageScore" label="平均分" />
        <el-table-column label="趋势">
          <template #default="{ row }">
            <el-progress 
              :percentage="parseInt(row.submittedRate)" 
              :color="getProgressColor(parseInt(row.submittedRate))" 
              :show-text="false" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script setup>
defineProps({
  stats: {
    type: Object,
    required: true
  }
})

const getProgressColor = (percentage) => {
  if (percentage > 90) return '#67C23A'
  if (percentage > 70) return '#E6A23C'
  return '#F56C6C'
}
</script>

<style scoped>
.stats-card {
  margin-bottom: 20px;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.subject-stats {
  margin-top: 20px;
}

.subject-stats h4 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}
</style>